<template>
  <div>
    <div id="app">
      <div class="header">
        <img class="logo" src="./assets/images/logo.png" alt="" />
        <!-- 5.路由导航:rount-link最终会被渲染成a标签-->
        <!-- 5.设置路由导航 -->
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. : 渲染成a标签的href -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">发现音乐</router-link>
        <a href="javascript:;" @click="mineClick">我的音乐</a>
        <a href="javascript:;" @click="friendClick">朋友</a>
        <img class="right" src="./assets/images/right.png" alt="" />
      </div>
    </div>

    <!-- 6.设置路由出口： 路由对应的组件应该加载到什么位置 -->
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  //事件
  methods: {
    mineClick () {
      /*路由跳转有两种方式 
      1. <router-link> : 渲染成a标签，点击无条件跳转路由。没有业务逻辑
      2. this.$router.push() : 使用js条件（类似于window.location.herf）,可以做业务逻辑
      */
      if (confirm('请先登录')) {
        //跳转登录组件(页面)
        //写法1 ： 使用路径跳转
        // this.$router.push('/login')
        //写法2 ： 使用组件name跳转 (name没有/)
        this.$router.push({ name: 'login' })
      } else {
        //跳转到我的组件
        this.$router.push('/mine')
      }
    },
    friendClick () {
      /* 路由传参有两种方式
      第一种：使用query传参 ： 相当于之前的window.location.href = 'url?key=value'
        * 接收： this.$route.query   （停留在window位置，刷新参数一直在）
      第二种： 使用params传参 ： 内存传参 (页面不能刷新，一刷新就没有了)
        * 接收： this.$route.params
      */
      // this.$router.push({
      //   path: '/friend', //路径跳转组件
      //   query: {
      //     //参数
      //     name: '张三',
      //     age: 20
      //   }
      // })

      /* params传参： 用户在地址栏看不见，页面一刷新就没有了
          使用params的时候，需要通过name跳转路由(传递隐私数据)
      */
      this.$router.push({
        name: 'friend', //name跳转组件
        params: {
          //参数
          name: '张三',
          age: 20
        }
      })
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 700px;
}

.header {
  display: flex;
}

.header a {
  flex: 1;
  background-color: #242424;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
  /* 取消下划线 */
  color: white;
}

.header .logo {
  width: 200px;
}

.header .right {
  width: 800px;
}
</style>
